<template>
  <div class="container">
    <Header></Header>
    <Nav></Nav>
    <div>
      <div class="content">
        <div class="left">
          <img style="width: 200px;float: left;margin-top: 107px;" src="../assets/main_yey1.jpg"
            v-if="this.garden_id === 5" alt="">
          <img style="width: 200px;float: left;margin-top: 107px;" src="../assets/main_yey3.jpg"
            v-if="this.garden_id === 6" alt="">
        </div>
        <div class="right">
          <p style="margin-top: 66px;">{{ this.garden_title }}</p>
          <span>简介：</span>
          <p>{{ this.garden_troduction }}</p>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'
export default {
  name: 'main_starNews',
  components: {
    Header,
    Nav,
    Footer
  },
  data() {
    return {
      garden_title: [],
      garden_troduction: [],
      garden: 0,
      garden_id: [],
    }
  },
  created() {
    eventBus.$on('garden_title', item => {
      this.garden_title = item
      console.log(this.garden_title)
    }),
      eventBus.$on('garden_troduction', item => {
        this.garden_troduction = item
        console.log(this.garden_troduction)
      }),
      eventBus.$on('garden_id', item => {
        this.garden_id = item
        console.log(this.garden_id)
      })
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>
.content {
  margin-left: 300px;
}

.right,
.left {
  display: inline-block;
}

.right {
  position: absolute;
  top: 230px;
  width: 500px;
  height: 400px;
}

.left {
  width: 200px;
  height: 400px;
}
</style>
